<template>
  <div class="app-container">
    <div style="text-align: center;">
      <span style="font-size: 24px; color: #000000; font-weight: bold">{{ info.taskInfoTitle }}</span>
    </div>
    <div style="margin: 40px 0 20px 0">
      <span v-html="info.testPaperDescription" style="font-size: 14px; color: #666666"/>
    </div>
    <div>
      <div v-for="(question, index) in questions" :key="index">
        <div>
          <span style="font-size: 18px; color: #000000">{{ num[index] }}、{{ question.label }}</span>
        </div>
        <div v-for="(q, index) in question.questions" style="margin: 10px; font-size: 14px" :key="index">
          <div style="margin-bottom: 5px">
            {{ index + 1 }}.{{ q.questionTopic }}
          </div>
          <div>
            <div v-if="q.questionType === '1' || q.questionType === '2'">
              <div v-for="o in JSON.parse(q.questionOptions)" style="margin: 10px" :key="o">
                {{ o.value }}.{{ o.label }}
              </div>
              <div style="color: green">
                试题答案：{{ q.questionAnswer }}
              </div>
              <div style="color: grey">
                {{ view ? '你的' : '用户'}}答案：{{ q.answer ? q.answer : '无' }}
              </div>
            </div>
            <div v-if="q.questionType === '3'">
              <div style="color: green">
                试题答案：{{ q.questionAnswer === 'T' ? '正确' : '错误' }}
              </div>
              <div style="color:grey">
                {{ view ? '你的' : '用户'}}答案：{{ q.answer ? q.answer === 'T' ? '正确' : '错误' : '无' }}
              </div>
            </div>
            <div v-if="q.questionType === '4'">
              <div style="color: green">
                试题答案：
                <div style="margin: 5px 0" v-for="(item, index) in JSON.parse(q.questionAnswer)" :key="index">
                  第{{ index + 1 }}空：{{ item.answer }}
                </div>
              </div>
              <div style="color: grey">
                {{ view ? '你的' : '用户'}}答案：
                <span v-if="JSON.parse(q.answer).length === 0">
                  无
                </span>
                <div v-else style="margin: 5px 0" v-for="(item, index) in JSON.parse(q.answer)" :key="index">
                  第{{ index + 1 }}空：{{ item.answer }}
                </div>
              </div>
            </div>
            <div v-if="q.questionType === '5'">
              <div style="color: green">
                试题答案：无
              </div>
              <div style="color:grey">
                {{ view ? '你的' : '用户'}}答案：
                <span v-if="!q.answer">无</span>
                <span v-else v-html="q.answer"/>
              </div>
            </div>
            <div v-if="!view">
              评分：
              <el-input-number v-model="q.rectifyScore" :min="0" :max="q.questionScore" size="mini"/>
              <span style="margin-left: 10px; color: orange">分值:{{
                  q.questionScore
                }}</span>
            </div>
            <div v-else>
              得分：{{q.rectifyScore}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="!view" style="text-align: right; margin-top: 10px">
      <div>
        <el-button @click="cancel">
          取 消
        </el-button>
        <el-button type="primary" @click="submit">
          提交评分
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {testTaskInfo, testTaskRectify} from "@/api/exam/testTask";

export default {
  name: 'grade',
  props: {
    id: {
      type: String,
      default: null
    },
    view: {
      type: Boolean,
      default: false
    }
  },
  dicts: ['exam_question_type'],
  data() {
    return {
      num: ['一', '二', '三', '四', '五'],
      info: {},
      questions: []
    }
  },
  created() {
    testTaskInfo(this.id).then(res => {
      this.info = res.data
      this.dict.type.exam_question_type.forEach(d => {
        const questions = res.data.records.filter(q => q.questionType === d.value)
        if (questions.length > 0) {
          this.questions.push({
            label: d.label,
            questions
          })
        }
      })
    })
  },
  methods: {
    cancel() {
      this.$emit('close')
    },
    submit() {
      testTaskRectify(this.info).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        this.cancel()
      })
    }
  }
}
</script>

<style scoped>

</style>
